// components/tab-bar/index.js
// const app = getApp()
const sysInfo = wx.getSystemInfoSync()
Component({
    properties: {
        title: {
            type: String,
            value: ''
        },
        backgroundColor: {
            type: String,
            value: '#fff'
        },
        textColor: {
            type: String,
            value: '#000'
        },
        backIcon: {
            type: Boolean,
            value: true
        },
        backUrl: {
            type: String,
            value: ''
        },
        homeIcon: {
            type: Boolean,
            value: true
        },
        homeUrl: {
            type: String,
            value: ''
        },
        navigateType: {
            type: String,
            value: 'navigateTo'
        },
        titleSize: {
            type: String,
            value: "36rpx"
        }
    },
    options: {},
    data: {
        sysInfo,
        barHeight: sysInfo.statusBarHeight,
        height: sysInfo.statusBarHeight + 44,
        style: '',
        backStyle: '',
        homeStyle: ''
    },
    observers: {
        backUrl() {
            this.backIconShow()
        },
        backgroundColor() {
            this.setStyle()
        }
    },
    lifetimes: {
        attached() {
            this.setStyle()
            this.setIconStyle()
            this.backIconShow()
        },
        detached() {
        },
    },
    methods: {
        setStyle() {
            const {height, barHeight, backgroundColor, textColor} = this.data
            let style = `
            height:${height}px;
            padding-top: ${barHeight}px;
            background: ${backgroundColor};
            color:${textColor};
            `
            this.setData({
                style
            })
        },
        setIconStyle() {
            let {textColor} = this.data
            textColor = encodeURIComponent(textColor)
            let backStyle = `
            background-image: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cpath d='M461.995 512l211.2 211.2-60.331 60.33L341.334 512l271.53-271.53 60.33 60.33z' fill='${textColor}'/%3E%3C/svg%3E");
            `
            let homeStyle = `
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M19 21H5a1 1 0 0 1-1-1v-9H1l10.327-9.388a1 1 0 0 1 1.346 0L23 11h-3v9a1 1 0 0 1-1 1zm-6-2h5V9.157l-6-5.454-6 5.454V19h5v-6h2v6z' fill='${textColor}'/%3E%3C/svg%3E");
            `
            this.setData({
                backStyle,
                homeStyle
            })
        },
        backIconShow() {
            const routers = getCurrentPages()
            if (routers.length === 1 && !this.data.backUrl) {
                this.setData({
                    backIcon: false
                })
            } else {
                this.setData({
                    backIcon: true
                })
            }
        },
        handlerBack() {
            let backUrl = this.data.backUrl
            if (backUrl) {
                wx.navigateTo({
                    url: backUrl
                })
                return
            }
            wx.navigateBack()
        },
        handlerGoHome() {
            console.log(this.data.navigateType)
            wx[this.data.navigateType]({
                url: this.data.homeUrl || '/pages/index/index'
            })
        }
    }
})
